<template>
    <div class="comment-wrap">
        <div class="shop-comment df ">
            <div class="left tac fn">
                <h1>{{ shopData.score / 20 | toFixed }}</h1>
                <h2>综合评分</h2>
                <p>高于周边商家96%</p>
            </div>
            <div class="right f1 df fdc aic jcsb">
                <div class="df aic">
                    <span>服务态度</span>
                    <van-rate v-model="shopData.score" allow-half void-icon="star" readonly color="#ffc300" size="16px" />
                    <p>{{ shopData.score / 20 | toFixed }}</p>
                </div>
                <div class="df aic">
                    <span>菜品质量</span>
                    <van-rate v-model="shopData.score" allow-half void-icon="star" readonly color="#ffc300" size="16px" />
                    <p>{{ shopData.score / 20 | toFixed }}</p>
                </div>
                <div class="df aic time">
                    <span>送达时间</span>
                    <p>{{ shopData.deliveryTime }}分钟</p>
                </div>
            </div>
        </div>

        <div class="user-comment">
            <van-tabs type="card" color="#ffc300" title-active-color="#000">
                <van-tab :title="`全部${commentData.length}`">
                    <user-comment v-for="(item, index) in commentData" :key="index" :item="item"></user-comment>
                </van-tab>
                <van-tab :title="`满意${satisfiedCommentData.length}`">
                    <template v-for="(item, index) in satisfiedCommentData">
                        <user-comment v-if="item" :key="index" :item="item"></user-comment>
                    </template>
                </van-tab>
                <van-tab :title="`不满意${dissatisfiedcCommentData.length}`">
                    <template v-for="(item, index) in dissatisfiedcCommentData">
                        <user-comment v-if="item" :key="index" :item="item"></user-comment>
                    </template>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script>
import UserComment from "./UserComment.vue"
import { api_shop_ratings } from "@/apis/comment"
import { mapState } from "vuex"

export default {
    components: {
        UserComment
    },
    data() {
        return {
            // 全部
            commentData: [],
            // 满意
            satisfiedCommentData: [],
            // 不满意
            dissatisfiedcCommentData: []
        }
    },
    methods: {
        async getCommentData() {
            const res = await api_shop_ratings()
            console.log(res);
            // 全部
            this.commentData = res.data.data
            // 满意
            this.satisfiedCommentData = res.data.data.filter(v => {
                if (v.rateType === 0) {
                    return v
                }
            })
            // 不满意
            this.dissatisfiedcCommentData = res.data.data.filter(v => {
                if (v.rateType == 1) {
                    return v
                }
            })
        }
    },
    computed: {
        ...mapState('shop', ['shopData'])
    },
    created() {
        this.getCommentData()


    }
}
</script>

<style lang="scss" scoped>
.comment-wrap {
    background-color: #f4f5f7;
    height: 100%;
    overflow-y: scroll;

    .shop-comment {
        padding: 30px 20px;
        background-color: #fff;

        .left {
            padding-right: 20px;
            border-right: 1px solid #c8c8c8;

            h1 {
                font-weight: bold;
                color: #ffc300;
                font-size: 30px;
            }

            h2 {
                font-size: 18px;
                margin: 10px 0;
            }

            p {
                font-size: 13px;
                color: #999;
            }
        }

        .right {

            div {
                span {
                    font-size: 16px;
                }

                .van-rate {
                    margin: 0 7px;
                }

                p {
                    font-size: 14px;
                    color: #ffc300;
                }
            }

            .time {
                width: 100%;
                padding-left: 25px;

                p {
                    color: #999;
                    margin-left: 8px;
                }
            }
        }
    }

    .user-comment {
        background-color: #fff;
        margin-top: 20px;
        padding: 30px 10px;

        :deep(.van-tabs__nav) {
            margin: 0;
        }
    }

    // :deep(.van-tab){
    //     overflow-y: scroll;
    // }
}
</style>